<template>
  <view class="idiom-page">
    <view class="back-btn" @click="goBack">
      <image src="/static/images/back.png" mode="aspectFit"></image>
    </view>
    
    <view class="idiom-container">
      <!-- 游戏状态显示 -->
      <view class="game-status">
        <text class="round">回合: {{ round }}</text>
        <text class="score">得分: {{ score }}</text>
      </view>
      
      <!-- 当前成语展示 -->
      <view class="current-idiom" :style="{backgroundColor: idiomBgColor}">
        <text>{{ currentIdiom || '点击开始游戏' }}</text>
      </view>
      
      <!-- 上一个成语 -->
      <view class="last-idiom" v-if="lastIdiom">
        <text>上一个: {{ lastIdiom }}</text>
      </view>
      
      <!-- 操作区域 -->
      <view class="controls">
        <view class="btn start" @click="startGame" v-if="!gameStarted">
          <image src="/static/images/play.png" mode="aspectFit"></image>
          <text>开始游戏</text>
        </view>
        
        <template v-else>
          <view class="btn answer" @click="showAnswerInput = true">
            <image src="/static/images/answer.png" mode="aspectFit"></image>
            <text>回答</text>
          </view>
          <view class="btn pass" @click="passTurn">
            <image src="/static/images/pass.png" mode="aspectFit"></image>
            <text>跳过</text>
          </view>
        </template>
      </view>
      
      <!-- 计时器 -->
      <view class="timer" v-if="gameStarted">
        <progress 
          :percent="timerPercent" 
          activeColor="#FF7675" 
          backgroundColor="#F5F5F5" 
          stroke-width="10"
        />
        <text>{{ countdown }}秒</text>
      </view>
      
      <!-- 结果提示 -->
      <view class="result-message" v-if="showResult">
        <text :class="[resultType]">{{ resultMessage }}</text>
      </view>
    </view>
    
    <!-- 回答输入框 -->
    <view class="answer-dialog" v-if="showAnswerInput">
      <view class="dialog-content">
        <view class="dialog-header">
          <text>接龙回答</text>
        </view>
        <view class="dialog-body">
          <text class="hint">请接: {{ currentIdiom.charAt(currentIdiom.length - 1) }}</text>
          <input 
            type="text" 
            v-model="userAnswer" 
            placeholder="输入四字成语" 
            maxlength="4"
            focus
            @confirm="checkAnswer"
          />
        </view>
        <view class="dialog-footer">
          <view class="btn cancel" @click="showAnswerInput = false">取消</view>
          <view class="btn confirm" @click="checkAnswer">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 常用成语库
const idioms = [
  '一心一意', '三心二意', '四面八方', '五湖四海', '六神无主',
  '七上八下', '八仙过海', '九牛一毛', '十全十美', '百里挑一',
  '千军万马', '万紫千红', '一马当先', '二话不说', '三言两语',
  '四海为家', '五花八门', '六亲不认', '七嘴八舌', '八面玲珑',
  '九死一生', '十拿九稳', '百发百中', '千钧一发', '万无一失',
  '一见钟情', '二话没说', '三生有幸', '四分五裂', '五光十色',
  '六根清净', '七情六欲', '八面威风', '九霄云外', '十恶不赦',
  '百折不挠', '千变万化', '万水千山', '一箭双雕', '两全其美',
  '三头六臂', '四通八达', '五彩缤纷', '六畜兴旺', '七零八落',
  '八拜之交', '九泉之下', '十万火急', '百年好合', '千辛万苦',
  '万众一心', '一鼓作气', '两面三刀', '三更半夜', '四大皆空',
  '五体投地', '六亲不认', '七窍生烟', '八面受敌', '九九归一',
  '十指连心', '百无聊赖', '千载难逢', '万念俱灰', '一视同仁',
  '两小无猜', '三从四德', '四平八稳', '五谷丰登', '六神不安',
  '七拼八凑', '八斗之才', '九牛二虎', '十全十美', '百战百胜',
  '千疮百孔', '万古长青'
]

export default {
  data() {
    return {
      gameStarted: false,
      currentIdiom: '',
      lastIdiom: '',
      round: 0,
      score: 0,
      countdown: 15,
      timer: null,
      timerPercent: 100,
      showAnswerInput: false,
      userAnswer: '',
      showResult: false,
      resultMessage: '',
      resultType: '',
      idiomBgColor: '#f8f9fa',
      usedIdioms: []
    }
  },
  onUnload() {
    clearInterval(this.timer)
  },
  methods: {
    startGame() {
      this.gameStarted = true
      this.round = 1
      this.score = 0
      this.startNewRound()
    },
    startNewRound() {
      // 重置计时器
      clearInterval(this.timer)
      this.countdown = 15
      this.timerPercent = 100
      
      // 随机选择一个新成语
      let availableIdioms = idioms.filter(idiom => !this.usedIdioms.includes(idiom))
      if (availableIdioms.length === 0) {
        // 如果所有成语都用过了，重置使用记录
        this.usedIdioms = []
        availableIdioms = [...idioms]
      }
      
      const randomIndex = Math.floor(Math.random() * availableIdioms.length)
      this.lastIdiom = this.currentIdiom
      this.currentIdiom = availableIdioms[randomIndex]
      this.usedIdioms.push(this.currentIdiom)
      
      // 随机背景色
      const colors = ['#FF9AA2', '#FFB7B2', '#FFDAC1', '#E2F0CB', '#B5EAD7', '#C7CEEA']
      this.idiomBgColor = colors[Math.floor(Math.random() * colors.length)]
      
      // 开始倒计时
      this.timer = setInterval(() => {
        this.countdown--
        this.timerPercent = (this.countdown / 15) * 100
        
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          this.showResultMessage('时间到! 游戏结束', 'error')
          setTimeout(() => {
            this.gameStarted = false
            this.showResult = false
          }, 2000)
        }
      }, 1000)
      
      this.showResult = false
      this.userAnswer = ''
    },
    checkAnswer() {
      if (!this.userAnswer || this.userAnswer.length !== 4) {
        uni.showToast({
          title: '请输入四字成语',
          icon: 'none'
        })
        return
      }
      
      // 检查是否以正确的字开头
      const lastChar = this.currentIdiom.charAt(this.currentIdiom.length - 1)
      if (this.userAnswer.charAt(0) !== lastChar) {
        this.showResultMessage(`必须以"${lastChar}"开头`, 'error')
        return
      }
      
      // 检查是否是有效成语
      if (!idioms.includes(this.userAnswer)) {
        this.showResultMessage('不是有效成语', 'error')
        return
      }
      
      // 检查是否已经使用过
      if (this.usedIdioms.includes(this.userAnswer)) {
        this.showResultMessage('成语已使用过', 'error')
        return
      }
      
      // 回答正确
      this.showAnswerInput = false
      this.score += 10
      this.round++
      this.showResultMessage('回答正确! +10分', 'success')
      
      // 更新当前成语
      this.lastIdiom = this.currentIdiom
      this.currentIdiom = this.userAnswer
      this.usedIdioms.push(this.userAnswer)
      this.userAnswer = ''
      
      // 开始新回合
      clearInterval(this.timer)
      setTimeout(() => {
        this.startNewRound()
      }, 1500)
    },
    passTurn() {
      clearInterval(this.timer)
      this.showResultMessage('已跳过', 'warning')
      this.round++
      setTimeout(() => {
        this.startNewRound()
      }, 1500)
    },
    showResultMessage(message, type) {
      this.showResult = true
      this.resultMessage = message
      this.resultType = type
    },
    goBack() {
      clearInterval(this.timer)
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.idiom-page {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  
  .back-btn {
    position: absolute;
    top: 40rpx;
    left: 40rpx;
    width: 60rpx;
    height: 60rpx;
    z-index: 10;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .idiom-container {
    width: 90%;
    max-width: 800rpx;
    margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .game-status {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    
    text {
      font-size: 28rpx;
      color: #666;
      
      &.round {
        color: #4a90e2;
      }
      
      &.score {
        color: #00b894;
      }
    }
  }
  
  .current-idiom {
    width: 100%;
    height: 200rpx;
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    text {
      font-size: 60rpx;
      font-weight: bold;
      color: #333;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }
  }
  
  .last-idiom {
    margin-bottom: 40rpx;
    
    text {
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .controls {
    display: flex;
    justify-content: center;
    margin-bottom: 40rpx;
    
    .btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 180rpx;
      height: 180rpx;
      border-radius: 50%;
      margin: 0 20rpx;
      background: white;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
      }
      
      image {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
      }
      
      text {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
    }
    
    .start {
      background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
      
      text {
        color: white;
      }
    }
    
    .answer {
      background: linear-gradient(45deg, #43e97b 0%, #38f9d7 100%);
      
      text {
        color: white;
      }
    }
    
    .pass {
      background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%);
      
      text {
        color: white;
      }
    }
  }
  
  .timer {
    width: 100%;
    margin-bottom: 30rpx;
    
    progress {
      margin-bottom: 10rpx;
    }
    
    text {
      display: block;
      text-align: center;
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .result-message {
    margin-top: 20rpx;
    
    text {
      font-size: 32rpx;
      font-weight: bold;
      
      &.success {
        color: #00b894;
      }
      
      &.error {
        color: #ff7675;
      }
      
      &.warning {
        color: #fdcb6e;
      }
    }
  }
  
  .answer-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    
    .dialog-content {
      width: 80%;
      background: white;
      border-radius: 20rpx;
      overflow: hidden;
      
      .dialog-header {
        padding: 30rpx;
        text-align: center;
        border-bottom: 1rpx solid #eee;
        
        text {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
      }
      
      .dialog-body {
        padding: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .hint {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 30rpx;
        }
        
        input {
          width: 100%;
          height: 80rpx;
          border: 1rpx solid #ddd;
          border-radius: 10rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          text-align: center;
        }
      }
      
      .dialog-footer {
        display: flex;
        border-top: 1rpx solid #eee;
        
        .btn {
          flex: 1;
          text-align: center;
          padding: 30rpx;
          font-size: 28rpx;
          
          &.cancel {
            color: #666;
            border-right: 1rpx solid #eee;
          }
          
          &.confirm {
            color: #4facfe;
            font-weight: bold;
          }
        }
      }
    }
  }
}

/* 横屏适配 */
@media (orientation: landscape) {
  .idiom-page {
    .idiom-container {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 50rpx;
      max-width: none;
      width: 90%;
    }
    
    .game-status {
      width: 100%;
      order: 1;
    }
    
    .current-idiom {
      width: 45%;
      height: 300rpx;
      order: 2;
      margin-right: 30rpx;
    }
    
    .last-idiom {
      width: 45%;
      order: 3;
      text-align: right;
      margin-right: 30rpx;
    }
    
    .controls {
      width: 45%;
      order: 4;
      margin-right: 30rpx;
    }
    
    .timer {
      width: 45%;
      order: 5;
    }
    
    .result-message {
      width: 45%;
      order: 6;
    }
  }
}
</style>